<template>
	<view class="uiwu">
		<uiwu-tab-header headerIndex="1" />
		<view class="uiwu-money uiwu-flex-space">
			<view class="money uiwu-flex-align">
				<image src="/static/jifenyue.png" mode="widthFix"></image>
				<text>积分余额：{{userInfo.integral}}</text>
			</view>
			<image @tap="uiwu.openWindow('/pages/pointsmall/usage')" src="/static/jifenmingxing.png" mode="widthFix" style="width: 60rpx;"></image>
		</view>
		<view class="uiwu-scroll">
			<scroll-view scroll-x>
				<view class="uiwu-scroll-list uiwu-flex-align">
					<view 
						class="item" 
						:class="index == ActiveIndex ? 'active' : ''" 
						v-for="(item,index) in menuTablist" 
						:key="index"
						@tap.stop="swiperTab(item,index)"
					>
						{{item.cate_name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="uiwu-border"></view>
		<uiwu-list :loading="more">
			<view class="uiwu-goods" v-if="listData.length">
				<view class="uiwu-goods-list uiwu-flex">
					<view class="uiwu-goods-list-item" @tap.stop="openWindow(item)" v-for="(item,index) in listData" :key="index">
						<view class="top">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="name uiwu-hidden1">{{item.store_name}}</view>
						<view class="btn uiwu-flex-space">
							<view class="uiwu-flex-align">
								<image src="/static/jifenyue.png" mode="widthFix"></image>
								<text>{{item.integral}}</text>
							</view>
							<view class="right uiwu-flex-center" :class="Number(userInfo.integral) > Number(item.integral) ? 'active' : ''">
								{{Number(userInfo.integral) > Number(item.integral) ? '立即兑换' : '积分不足'}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</uiwu-list>
		<uiwu-tabBar :cuont="1" />
	</view>
</template>

<script setup lang="ts">
	import { onLoad , onReachBottom } from '@dcloudio/uni-app';
	import { inject, ref , toRef} from 'vue';
	import { goodslist, mallCategory } from '@/api/api';
	import { uiwu } from '@/config/config';
	const ActiveIndex = ref<any>(0)
	const menuTablist = ref<Array<object>>([])
	const listData = ref<Array<object>>([])
	const pageNum = ref<number>(1)
	const more = ref<string>('loading');
	const isLock = ref<boolean>(true)
	const store = inject<any>('store');
	const userInfo = toRef(store.state,'userInfo')
	const cateId = ref(0)
	const openWindow = (item)=>{
		// if(Number(userInfo.value.integral) < Number(item.integral)) return uiwu.toast('可用积分不足')
		uni.navigateTo({
			url:`/pages/pointsmall/detail?id=${item.id}`
		})
	}
	/**
	 * 切换tab分类
	 */
	const swiperTab = (item:object,index:number) : void => {
		cateId.value = item.id
		ActiveIndex.value = index
		getGoodslist(false)
	}
	/**
	 * 获取分类
	 */
	const getMallCategory = async () : Promise<any> => {
		const { data } = await mallCategory();
		menuTablist.value = data
		cateId.value = data[0].id
		getGoodslist()
	}
	/**
	 * 获取商品列表
	 */
	const getGoodslist = async (mack:boolean = false) : Promise<any> => {
		if(!mack) pageNum.value = 1
		const { data:{data , total}} = await goodslist({
			page:pageNum.value,
			cate_id:cateId.value
		});
		isLock.value = true
		uiwu.setlist({
			isMore:mack,
			listData,
			total,
			listRow:data,
			more,
			pageNum
		})
	}
	/**
	 * 加载更多
	 */
	onReachBottom(()=>{
		if(!isLock.value) return 
		isLock.value = false
		pageNum.value++
		getGoodslist(true)
	})
	onLoad(()=>{
		getMallCategory()
	})
</script>

<style lang="scss">
	page{
		background: url('../../static/yuandian.png') no-repeat 0 0 #FDD134;
		background-size: 100% 100%;
		padding-bottom: 22rpx;
	}
	.uiwu-money{
		background-color: #272323;
		width: 100%;
		padding: 12rpx 20rpx;
		.money{
			flex: 1;
			height: 60rpx;
			border-radius: 30rpx;
			border: 3rpx solid #FCE5C7;
			padding: 0 20rpx;
			margin-right: 38rpx;
			image{
				width: 40rpx;
				margin-right: 12rpx;
			}
			text{
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
	.uiwu-scroll{
		background-color: #272323;
		width: 100%;
		height: 82rpx;
		&-list{
			padding-left: 20rpx;
			height: 82rpx;
			.item{
				margin-right: 32rpx;
				flex-shrink: 0;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				height: 55rpx;
				line-height: 55rpx;
				&.active{
					text-align: center;
					width: 176rpx;
					background: url('../../static/indextab.png') no-repeat 0 0;
					background-size: 100% 100%;
					font-size: 32rpx;
					font-family: PingFang SC-Heavy, PingFang SC;
					font-weight: 800;
					color: #FFFFFF;
					line-height: inherit;
					text-shadow: 0px 4rpx 0rpx #231815;
				}
			}
		}
	}
	.uiwu-border{
		width: 100%;
		height: 6rpx;
		background: #EF821E;
	}
	.uiwu-goods{
		margin-top: 20rpx;
		padding: 0 15rpx;
		&-list{
			background: url('../../static/goodsbg.png') no-repeat 0 0;
			background-size: 100% 100%;
			padding: 22rpx;
			flex-wrap: wrap;
			justify-content: space-between;
			&-item{
				width: 330rpx;
				margin-bottom: 32rpx;
				.top{
					background: #FCE5C7;
					width: 330rpx;
					height: 330rpx;
					border-radius: 16rpx;
					padding: 11rpx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}
				}
				.name{
					font-size: 28rpx;
					font-weight: bold;
					color: #161A1B;
					margin: 12rpx 0;
				}
				.btn{
					image{
						width: 32rpx;
					}
					text{
						font-size: 28rpx;
						font-weight: 500;
						color: #EF821E;
						margin-left: 6rpx;
					}
					.right{
						width: 128rpx;
						height: 48rpx;
						background: #CCCCCC;
						border-radius: 24rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #FFFFFF;
						&.active{
							background: #EF821E;
						}
					}
				}
			}
		}
	}
</style>
